<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form ref="queryParams" :model="queryParams" inline label-width="60px" label-position="left">
      <el-form-item label="流程实例id">
        <el-input v-model="queryParams.processInstanceId" clearable placeholder="请输入流程实例id"/>
      </el-form-item>
      <el-form-item label="申请人">
        <el-input v-model="queryParams.userId" clearable placeholder="请输入申请人"/>
      </el-form-item>
      <el-form-item label="申请人姓名">
        <el-input v-model="queryParams.name" clearable placeholder="请输入申请人姓名"/>
      </el-form-item>
      <el-form-item label="请假申请时间">
        <el-input v-model="queryParams.leaveDate" clearable placeholder="请输入请假申请时间"/>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input v-model="queryParams.beginDate" clearable placeholder="请输入开始时间"/>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input v-model="queryParams.endDate" clearable placeholder="请输入结束时间"/>
      </el-form-item>
      <el-form-item label="请假类型">
        <el-input v-model="queryParams.type" clearable placeholder="请输入请假类型"/>
      </el-form-item>
      <el-form-item label="请假事由">
        <el-input v-model="queryParams.reason" clearable placeholder="请输入请假事由"/>
      </el-form-item>
      <el-form-item label="状态（1：未开始；2：进行中；3已完成；4：驳回）">
        <el-input v-model="queryParams.status" clearable placeholder="请输入状态（1：未开始；2：进行中；3已完成；4：驳回）"/>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-button icon="el-icon-search" type="primary" @click="refresh()">查询</el-button>
        <el-button icon="el-icon-refresh" type="primary" @click="reset()">重置</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="addOaLeave()">添加</el-button>
        <el-button icon="el-icon-delete" type="primary" @click="removeBatch()" :disabled="delBtnDisabled">删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <table-page
      ref="tablePage"
      url="oaLeave/page"
      :columns="columns"
      :query-params="queryParams"
      @table-select-val="selectVal">
      <template slot-scope="{ row }" slot="action">
        <el-button @click="update(row)" type="text" >修改</el-button>
        <el-button @click="remove(row)" type="text" >删除</el-button>
      </template>
    </table-page>

    <!-- 添加表单 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      @close="handleReset('form')">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="流程实例id" prop="processInstanceId">
              <el-input v-model="form.processInstanceId" placeholder="请输入流程实例id" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="申请人" prop="userId">
              <el-input v-model="form.userId" placeholder="请输入申请人" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="申请人姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入申请人姓名" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="请假申请时间" prop="leaveDate">
              <el-input v-model="form.leaveDate" placeholder="请输入请假申请时间" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="开始时间" prop="beginDate">
              <el-input v-model="form.beginDate" placeholder="请输入开始时间" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="结束时间" prop="endDate">
              <el-input v-model="form.endDate" placeholder="请输入结束时间" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="请假类型" prop="type">
              <el-input v-model="form.type" placeholder="请输入请假类型" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="请假事由" prop="reason">
              <el-input v-model="form.reason" placeholder="请输入请假事由" @input="change($event)"/>
          </el-form-item>
          <el-form-item label="状态（1：未开始；2：进行中；3已完成；4：驳回）" prop="status">
              <el-input v-model="form.status" placeholder="请输入状态（1：未开始；2：进行中；3已完成；4：驳回）" @input="change($event)"/>
          </el-form-item>
      </el-form>
      <!-- 自定义按钮组 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleReset('form')">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import TablePage from "_c/CommonForm/table-page";
  import {addOaLeave, deleteBatchOaLeaveById, deleteOaLeaveById, updateOaLeave} from "_a/oa/oa-leave";
  import { MessageError, MessageSuccess, ConfirmCustom } from '_l/message'

  export default {
    name: 'oa-leave-manage',
    components: { TablePage },
    data() {
      return {
        columns: [
          {label: '流程实例id', prop: 'processInstanceId'},
          {label: '申请人', prop: 'userId'},
          {label: '申请人姓名', prop: 'name'},
          {label: '请假申请时间', prop: 'leaveDate'},
          {label: '开始时间', prop: 'beginDate'},
          {label: '结束时间', prop: 'endDate'},
          {label: '请假类型', prop: 'type'},
          {label: '请假事由', prop: 'reason'},
          {label: '状态（1：未开始；2：进行中；3已完成；4：驳回）', prop: 'status'},
          { label: '操作', slot: 'action'}
        ],
        queryParams: {},
        dialogShow:false,
        delBtnDisabled:true,
        dialogTitle: '添加',
        form: {},
        rules: {
          processInstanceId: [this.$ruler('流程实例id')],
          userId: [this.$ruler('申请人')],
          name: [this.$ruler('申请人姓名')],
          leaveDate: [this.$ruler('请假申请时间')],
          beginDate: [this.$ruler('开始时间')],
          endDate: [this.$ruler('结束时间')],
          type: [this.$ruler('请假类型')],
          reason: [this.$ruler('请假事由')],
          status: [this.$ruler('状态（1：未开始；2：进行中；3已完成；4：驳回）')],
        }
      }
    },
    methods: {
      change(e) {
        this.$forceUpdate()
      },
      /**
       * 刷新
       */
      refresh() {
        this.$refs.tablePage.refresh();
      },
      /**
       * 重置搜索条件
       */
      reset(){
        this.queryParams = {};
        this.$nextTick(function () {
          this.refresh()
        })
      },
      /**
       * 添加弹出框
       */
      addOaLeave(){
        this.form = {};
        this.dialogTitle = '添加';
        this.dialogShow = true;
      },
      /**
       * 修改弹出框
       * @param row
       */
      update(row){
        this.form = {...row};
        this.dialogTitle = '修改';
        this.dialogShow = true;
      },
      /**
       * 点击每一行的checkbox
       */
      selectVal(ids) {
        this.ids = ids.map(val => val['id']);
        this.delBtnDisabled = !this.ids.length
      },
      /**
       * 批量删除
       */
      removeBatch() {
        ConfirmCustom({type:'warning'}).then(()=>{
          deleteBatchOaLeaveById(this.ids).then(res => {
            if (res.data) {
              MessageSuccess('del')
            } else {
              MessageError('del')
            }
            this.refresh()
          })
        })
      },
      /**
       * 行内删除
       * @param row
       */
      remove(row) {
        ConfirmCustom({type:'warning'}).then(()=>{
          deleteOaLeaveById(row.id).then(res => {
            if (res.data) {
              MessageSuccess('del')
            } else {
              MessageError('del')
            }
            // 刷新表格
            this.refresh()
          })
        })
      },
      /**
       * 重置表单
       * @param name
       */
      handleReset(name) {
        this.dialogShow = false;
        this.$refs[name].resetFields()
      },
      /**
       * 提交表单
       * @param name
       */
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.dialogTitle === '添加') {
              addOaLeave(this.form).then(res => {
                if (res.data) {
                  MessageSuccess('add')
                } else {
                  MessageError('add')
                }
                this.cancelDialogAndRefresh()
              })
            } else {
              updateOaLeave(this.form).then(res => {
                if (res.data) {
                  MessageSuccess('upd')
                } else {
                  MessageError('upd')
                }
                this.cancelDialogAndRefresh()
              })
            }
          }
        })
      },
      /**
       * 关闭弹出框 和 刷新表格
       */
      cancelDialogAndRefresh() {
        // 清空表单
        this.handleReset('form');
        // 刷新表格
        this.refresh()
      },
    },
    mounted() {

    }
  }
</script>

<style scoped lang="scss">

</style>
